<template>
  <div class="formulate-container">
    <!-- 左侧部门树 -->
    <div class="dept-tree">
      <div class="tree-header">
        <div class="search-box">
          <el-input placeholder="搜索" prefix-icon="Search" v-model="searchKeyword" clearable />
        </div>
      </div>
      <div class="tree-content">
        <div class="center-title">计量中心</div>
        <el-tree
          :data="deptData"
          :props="defaultProps"
          node-key="id"
          highlight-current
          @node-click="handleNodeClick"
          default-expand-all
        />
      </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="main-content">
      <!-- 顶部标签页 -->
      <div class="tabs-header">
        <div class="tab-item active">查看附件</div>
        <div class="tab-item">名称</div>
        <div class="tab-item">附件描述</div>
        <div class="tab-item">操作</div>
      </div>

      <!-- 操作按钮区域 -->
      <div class="action-bar">
        <el-button type="primary" plain>查看附件</el-button>
        <el-button type="primary">下载</el-button>
      </div>

      <!-- 步骤导航 -->
      <div class="steps-container">
        <el-steps :active="1" finish-status="success" simple>
          <el-step title="制定文件" icon="Document" />
          <el-step title="审批" icon="Check" />
          <el-step title="批准执行" icon="Finished" />
        </el-steps>
      </div>

      <!-- 表单区域 -->
      <div class="form-container">
        <el-form :model="formData" label-width="180px" label-position="right">
          <el-form-item label="文件类型:">
            <el-select v-model="formData.fileType" placeholder="工作计划">
              <el-option label="工作计划" value="workplan" />
              <el-option label="质量计划" value="qualityplan" />
            </el-select>
          </el-form-item>

          <el-form-item label="执行部门:">
            <el-input v-model="formData.department" placeholder="中心">
              <template #append>
                <div class="dept-append">
                  <span>×</span>
                  <span class="divider">|</span>
                  <span>部门</span>
                </div>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="文件名称:">
            <el-input v-model="formData.fileName" placeholder="请输入" />
          </el-form-item>

          <el-form-item label="文件内容:">
            <el-input
              v-model="formData.fileContent"
              type="textarea"
              :rows="6"
              placeholder="请输入"
            />
          </el-form-item>

          <el-form-item label="附件原始文件上传:">
            <div class="upload-container">
              <el-input v-model="formData.attachment" placeholder="选择文件" readonly />
              <el-button type="primary" class="upload-btn">上传文件</el-button>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="form-actions">
              <el-button>取消</el-button>
              <el-button type="primary">提交</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 说明区域 -->
      <div class="description-area">
        <div class="desc-title">说明</div>
        <div class="desc-content">说明详情</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 搜索关键词
const searchKeyword = ref('')

// 部门树数据
const deptData = ref([
  {
    id: 1,
    label: '南宁检定所',
    children: []
  },
  {
    id: 2,
    label: '柳州检定所',
    children: []
  },
  {
    id: 3,
    label: '桂林检定所',
    children: []
  },
  {
    id: 4,
    label: '北海检定所',
    children: []
  },
  {
    id: 5,
    label: '钦州检定所',
    children: []
  },
  {
    id: 6,
    label: '防城港检定所',
    children: []
  },
  {
    id: 7,
    label: '贵港检定所',
    children: []
  },
  {
    id: 8,
    label: '玉林检定所',
    children: []
  },
  {
    id: 9,
    label: '百色检定所',
    children: []
  },
  {
    id: 10,
    label: '贺州检定所',
    children: []
  },
  {
    id: 11,
    label: '河池检定所',
    children: []
  },
  {
    id: 12,
    label: '崇左检定所',
    children: []
  }
])

const defaultProps = {
  children: 'children',
  label: 'label'
}

// 表单数据
const formData = reactive({
  fileType: '工作计划',
  department: '中心',
  fileName: '',
  fileContent: '',
  attachment: ''
})

// 处理节点点击
const handleNodeClick = (data) => {
  console.log('选中部门:', data.label)
}
</script>

<style lang="less" scoped>
.formulate-container {
  display: flex;
  height: 100%;
  background-color: #f5f7fa;
}

.dept-tree {
  width: 220px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
  
  .tree-header {
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
  }
  
  .tree-content {
    flex: 1;
    overflow: auto;
    padding: 10px;
    
    .center-title {
      font-weight: bold;
      margin-bottom: 10px;
      padding: 5px 0;
    }
  }
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
  
  .tabs-header {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
    
    .tab-item {
      padding: 10px 20px;
      cursor: pointer;
      
      &.active {
        color: #409EFF;
        border-bottom: 2px solid #409EFF;
      }
    }
  }
  
  .action-bar {
    margin-bottom: 20px;
  }
  
  .steps-container {
    margin-bottom: 30px;
  }
  
  .form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    
    .upload-container {
      display: flex;
      
      .el-input {
        flex: 1;
        margin-right: 10px;
      }
    }
    
    .form-actions {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
  }
  
  .description-area {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    
    .desc-title {
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .desc-content {
      color: #606266;
    }
  }
}

.dept-append {
  display: flex;
  align-items: center;
  
  .divider {
    margin: 0 5px;
    color: #dcdfe6;
  }
}
</style>